<template>
  <el-menu
    active-text-color="#ffd04b"
    background-color="#545c64"
    class="aside-container"
    default-active="2"
    text-color="#fff"
    :style="{ width: !isCollapse ? '230px' : '64px' }"
    :collapse="isCollapse"
    @open="handleOpen"
    @close="handleClose"
  >
    <p class="logo-lg">{{ isCollapse ? 'DIDI' : 'DIDI陪诊' }}</p>
    <TreeMenu :menuData="menuData" :index="1" />
  </el-menu>
</template>

<script setup>
  import TreeMenu from './treeMenu.vue'
  import { useRouter } from 'vue-router'
  import { reactive, computed } from 'vue'
  import { useStore } from 'vuex'
  const store = useStore()
  const router = useRouter()
  const menuData = reactive(router.options.routes[0].children)

  const isCollapse = computed(() => store.state.menu.isCollapse)
  // console.log(menuData);
  const handleOpen = () => {}
  const handleClose = () => {}
</script>

<style lang="less" scoped>
  .aside-container {
    height: 100%;

    .logo-lg {
      font-size: 20px;
      text-align: center;
      height: 50px;
      line-height: 50px;
      color: #fff;
    }
  }
</style>
